<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>创意精灵</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/header.css" />
</head>
<body>
    <div class="business-bridge-iframe">
        <iframe src="floating/floating.html" width="230px" frameborder="0" height="260px" style=";border-top-left-radius: 5px;border-top-right-radius: 5px;"></iframe>
        <img src="img/off_white.png" class="off-white js-off-white">
        <div class="shrink-button js-shrink-button">
            <span class="control">收起</span>
        </div>
    </div>
	<div class="warp ">
        <div class="nav_box">
            <div id="wrap">
                <div id="topBar">
                    <div class="nav clearfix" id="nav">
                        <div class="topBar">
                            <div class="nav_cont clearfix">
                                <a href="http://http://www.semyes.cn/index.php/Home/Index/index.html" class="nav_Logo"> <img src="img/logo.png" /></a>
                                <ul class="nav_list clearfix">
                                    <li class="nav_list_li">
                                        <a class="" href="http://www.semyes.cn/index.php/Home/Index/index.html" target="_self">首页</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a class="" href="http://www.semyes.cn/index.php/Home/Yishubao/index.html" target="_self">易数宝</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Fwxm/index.html" target="" class="">服务项目</a>
                                        <ul class="subnav">
                                            <li>
                                                <a href="http://www.semyes.cn/index.php/Home/Fwxm/sem.html" target="_self">SEM</a>
                                            </li>
                                            <p class="subnav_Tri"></p>
                                            <li>
                                                <a href="http://moban.semyes.cn" target="_self">网站建设</a>
                                            </li>
                                    
                                            <p class="subnav_Tri"></p>
                                    <li ><a href="http://www.semyes.cn/index.php/Home/Fwxm/extension.html"  target="_self">信息流广告</a></li><p class="subnav_Tri"></p>
                                        </ul>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Project/index.html" target="_self">成功案例</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="join.semyes.cn" target="_self" class="active">招商加盟</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Contact/index.html" target="_self" class="">联系我们</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Auto/introduce.html" target="_self" class="">关于我们</a>
                                        <ul class="subnav">
                                            <li>
                                                <a href="http://www.semyes.cn/index.php/Home/Auto/introduce.html" target="_self">原昇介绍</a>
                                            </li>
                                            <p class="subnav_Tri"></p>
                                            <li>
                                                <a href="http://www.semyes.cn/index.php/Home/Auto/culture.html" target="_self">原昇文化</a>
                                            </li>
                                            <p class="subnav_Tri"></p>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="top-creativity">
            <div class="top-creativity-middle clear-float">
                <div class="top-creativity-middle-left fl">原力创意</div>
                <div class="top-creativity-middle-right fr">
                    <img src="img/idea.png">
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="content-bg p-b80">
    		<div class="content p-b80">
    			<div class="select_word">
    				<div class="tabbable"> 
    				  <ul class="nav nav-tabs">
    				    <li class="active"><a href="#tab1" data-toggle="tab"><i class="icon-th-list white-icon-tab"></i> 从账户选择关键词 </a></li> 
    				    <li><a href="#tab2" data-toggle="tab"><i class="icon-pencil white-icon-tab icon-white"></i> 输入关键词</a></li>
    				  </ul>
    				  <div class="tab-content">
    				    <div class="tab-pane active margin-back" id="tab1">
    				    	<div class="am-u-lg-6 fl">
    						      <div class="innerUl">
    						      	<div class="am-panel-hd clear-float">
                                        <img src="img/user.png" class="user-img">
    						      		<span class="fl">账户：<span class="color-tone">原昇科技</span></span>
    						      	</div>
    						      	<div class="am-panel am-panel-height js-am-panel">
                                        <ul id="tree_model">
        						      		
        						      	</ul>
    						      	</div>
    						      </div>
    						</div>
    				      <div class="fl selected_key_word" id="reception_selected"></div>

    				    </div>
    				    <div class="tab-pane border_trilateral margin-back" id="tab2">
    				      <textarea placeholder="不多于200个字符，关键词用中文逗号隔开。" class="am-padding-xs js-am-padding-xs"></textarea>
    				      
    				    </div>
    				  </div>
    				  <div class="select-key">
    				  	<div class="am-margin-sm am-margin-left-0">
    						<div class="am-badge am-round">
    							<span class="inputNum js-input-num">0</span>
    							/
    							<span class="totalNum">20</span>
    						</div>
    				      </div>
    					  <button class="am-btn js-acquire_creative">获取创意</button>
    				  </div>
                      <div class="import-key">
                        <div class="am-margin-sm am-margin-left-0">
                            <div class="am-badge am-round">
                                <span class="inputNum js-input-num-key">0</span>
                                /
                                <span class="totalNum">200</span>
                            </div>
                          </div>
                          <button class="am-btn js-acquire_creative">获取创意</button>
                      </div>
    				</div>
    			</div>
    		</div>
        </div>
		<iframe src="footer/footer.html" height="135px" width="100%" frameborder="0" style="position: absolute;bottom: 0"></iframe>
	</div>
    <!-- loding -->
    <div class="fied">
        <img src="img/load.gif">
        <div class="calculate-middle">正在计算中</div>
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
	var data = {
    "code": 0,
    "getUserKeyword": [
        {
            "projectName": "工程品牌词",
            "baiUnit": [
                {
                    "unitName": "整体卫浴",
                    "baikeywords": [
                        "整体卫浴设计"
                    ]
                },
                {
                    "unitName": "品牌词",
                    "baikeywords": [
                        "缇诺",
                        "缇诺卫浴"
                    ]
                },
                {
                    "unitName": "工程词",
                    "baikeywords": [
                        "卫浴空间设计"
                    ]
                }
            ]
        },
        {
            "projectName": "核心产品wap",
            "baiUnit": [
                {
                    "unitName": "浴缸",
                    "baikeywords": [
                        "浴缸厂家"
                    ]
                },
                {
                    "unitName": "台盆",
                    "baikeywords": [
                        "台上盆厂家",
                        "洗脸盆厂家"
                    ]
                }
            ]
        },
        {
            "projectName": "工程品牌词wap",
            "baiUnit": [
                {
                    "unitName": "整体卫浴",
                    "baikeywords": [
                        "整体卫浴设计",
                        "整体卫浴厂家"
                    ]
                },
                {
                    "unitName": "工程词",
                    "baikeywords": [
                        "卫浴空间设计"
                    ]
                },
                {
                    "unitName": "品牌词",
                    "baikeywords": [
                        "佛山缇诺"
                    ]
                }
            ]
        },
        {
            "projectName": "核心产品",
            "baiUnit": [
                {
                    "unitName": "坐便器",
                    "baikeywords": [
                        "座便器供应商"
                    ]
                },
                {
                    "unitName": "浴缸",
                    "baikeywords": [
                        "浴缸厂家"
                    ]
                },
                {
                    "unitName": "台盆",
                    "baikeywords": [
                        "台上盆厂家",
                        "洗脸盆厂家"
                    ]
                }
            ]
        },
        {
            "projectName": "卫浴词",
            "baiUnit": [
                {
                    "unitName": "产品词",
                    "baikeywords": [
                        "人造石卫浴",
                        "人造石洗手盆",
                        "人造石浴缸"
                    ]
                },
                {
                    "unitName": "酒店厂家词",
                    "baikeywords": [
                        "浴缸厂家",
                        "佛山卫浴厂家",
                        "整体卫浴厂家",
                        "五星级酒店卫浴",
                        "五星级酒店卫浴品牌"
                    ]
                },
                {
                    "unitName": "卫浴品牌词",
                    "baikeywords": [
                        "高端卫浴品牌",
                        "世界卫浴十大品牌",
                        "世界顶级卫浴品牌",
                        "顶级卫浴品牌"
                    ]
                }
            ]
        },
        {
            "projectName": "卫浴词wap",
            "baiUnit": [
                {
                    "unitName": "酒店厂家词",
                    "baikeywords": [
                        "浴缸厂家",
                        "佛山卫浴厂家",
                        "整体卫浴厂家",
                        "五星级酒店卫浴",
                        "五星级酒店卫浴品牌"
                    ]
                },
                {
                    "unitName": "产品词",
                    "baikeywords": [
                        "人造石洁具",
                        "人造石卫浴",
                        "人造石洗手盆",
                        "人造石浴缸"
                    ]
                },
                {
                    "unitName": "卫浴品牌词",
                    "baikeywords": [
                        "高端卫浴品牌",
                        "世界卫浴十大品牌",
                        "世界顶级卫浴品牌",
                        "顶级卫浴品牌"
                    ]
                }
            ]
        }
    ]
}

	var list = '';
	for (var i = 0; i < data.getUserKeyword.length; i++) {
		var getdata = data.getUserKeyword;
		list += '<li class="one_tier">\
				<img src="img/add.png" class="add-img">\
		<span class="one_tier_name"><img src="img/folder2.png" class="js-one_tier_name_img">'+ getdata[i].projectName +'</span>';
		var towData = getdata[i].baiUnit;
		for (var j = 0; j < towData.length; j++) {

			list += '<ul class="two_tree">\
					<li class="two_tier">\
					<img src="img/add.png" class="two_tier-img">\
						<span >'+ towData[j].unitName +'</span>\
						<ul class="three_tree">';
							var threeData = towData[j].baikeywords;
							// console.log(threeData.length);
							for (var k = 0; k < threeData.length; k++) {
								list += '<li class="three_tree_text"><img src="img/file.png" class="three_tree_text_img">'+ threeData[k] +'</li>';
							}
						
			list += '</ul>\
					</li>\
				</ul>';
		}
	}

	list += '</li>';
	$("#tree_model").append(list);

	$("#tree_model .one_tier").click(function(){
		$(this).find(".two_tree").slideToggle("slow");	
		var addImg = $(this).find(".add-img").attr("src");
		var folderImg = $(this).find(".one_tier_name").find(".js-one_tier_name_img").attr("src");
		var add = 'img/add.png';
		var folder = "img/folder2.png"
		if(addImg == add ){
			$(this).find(".add-img").attr("src","img/subtract.png");
		} else {
			$(this).find(".add-img").attr("src","img/add.png");
		}
		
		if(folderImg == folder){
			$(this).find(".one_tier_name").find(".js-one_tier_name_img").attr("src","img/folder1.png");
		} else {
			$(this).find(".one_tier_name").find(".js-one_tier_name_img").attr("src","img/folder2.png");
		}
	
	})

	$("#tree_model .two_tree").click(function(event){
		event.stopPropagation(); 
		$(this).children(".two_tier").children(".three_tree").slideToggle("slow");
		var addImg = $(this).find(".two_tier-img").attr("src");
		var add = 'img/add.png';
		if (add == addImg) {
			$(this).find(".two_tier-img").attr("src","img/subtract.png")
		} else {
			$(this).find(".two_tier-img").attr("src","img/add.png")
		}
	})

	$(".three_tree_text").click(function(event) {
		event.stopPropagation();
		var text = $(this).text();
        var inputNum = $(".js-input-num").text();

        if (inputNum < 20) {
            inputNum++;
            $(this).parents(".am-panel").parent().parent().next().append('<span>'+ text +'<a href="javascript:;" class="del_selected_key_word"><img src="img/off_white.png" style="margin-left:5px;"></a></span>');
            $(".js-input-num").text(inputNum);
        } else {
            alert("不能超过20个");
        }
	})
    
	$(document).on("click",".del_selected_key_word",function(){
        var inputNum = $(".js-input-num").text();
		$(this).parent().remove();
        if (inputNum > 0) {
            inputNum --;
            $(".js-input-num").text(inputNum);
        } 

	})
    // 获取创意时先显示loding
	$(".js-acquire_creative").click(function(){
        var amPaddingXs = $(".js-input-num").text();
        var inputNumKey = $(".js-input-num-key").text();
        if (amPaddingXs > 20 || inputNumKey > 200) {
            alert("超过长度");
        } else {
            $(".fied").show();
            setInterval(function(){
                window.location.href='page/creative_list.html'
            },2000)
        }
	})
    //切换图标颜色
    $(".nav-tabs li").click(function(){
        $(".nav-tabs li a i").addClass("icon-white");
        $(this).find("a").find("i").removeClass("icon-white");
        if ($(this).index() == 0) {
            $(".select-key").show();
            $(".import-key").hide();
        } else {
            $(".import-key").show();
            $(".select-key").hide();
        }
    })

    //数值长度
    $(".js-am-padding-xs").on("input",function(){
        var inputNum = $(".js-input-num-key").text();
        if ($(this).val().length < 201) {
            $(".js-input-num-key").text($(this).val().length);
        } else {
            $(".js-input-num-key").text($(this).val().length);
            alert("超出长度了");
        }
    })
    //收缩服务
    $(".js-shrink-button").toggle(function(){
        $(".business-bridge-iframe").animate({
            left:"-230px",
        },1000)
        $(this).find("span").removeClass("control").text("服务指导");
    },function(){
        $(".business-bridge-iframe").animate({
            left:"0px",
        },1000)
        $(this).find("span").addClass("control").text("收起");
    })
    // 关闭浮窗
    $(".js-off-white").click(function(){
        $(".business-bridge-iframe").hide();
    })
})
</script>
</html>